<template>
	<view class="">
		<u-toast ref="uToast" />
		<view class="pad_bot" v-if="isBind">
			<!-- 头部 -->
			<view class="top_box">
				<view class="top" :style="{'height':phoneHeight+45+'px','position':'relative',}">
					<text class="top_tit">
						教管云管控-家长端
					</text>
				</view>
				<view class="header_info  pad_big mar_top_big">
					<view class="box box-align-center ">
						<view class="avatar">
							<image :src="appInfo.avatar?appInfo.avatar:defAvatar" mode="widthFix" style="width: 140rpx;border-radius: 50%;"></image>
						</view>
						<view class="user_info pad_def">
							<view class="box box-pack-between box-align-center pad_bot">
								<view class="username ">{{appInfo.name?appInfo.name:'未设置'}}</view>
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/msg.png" mode="widthFix" style="width: 40rpx;" v-if="false"></image>
							</view>
							<view class="box box-pack-between box-align-center" style="padding-bottom: 10rpx;font-size: 24rpx;">
								<view class="">学生平板状态:<text style="color: #34a9a2;" v-if="isOnline==1"> 在线</text><text style="color: #ff0000;" v-else> 离线</text></view>
								<view class="box box-align-center" style="font-size: 24rpx;" v-if="false">
									<text>当前应用：</text>
									<image :src="appInfo.app.app_img" mode="widthFix" style="width: 40rpx;"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="other_info pad_def">
						<view class="box pad_bot" v-if="false">
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/clock.png" mode="widthFix" style="width: 30rpx;padding-right: 5px;"></image>
							<text>今天使用时间 {{appInfo.minute | computeMinute}}</text>
						</view>
						<view class="box">
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/location.png" mode="widthFix" style="width: 30rpx;padding-right: 5px;"></image>
							<text>{{appInfo.addr?appInfo.addr:'暂无'}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 环形图 -->
			<view class="sn_data_charts box box-pack-between">
				<annularCharts :screenWidth="screenWidth" :chartsColor="'#01dad1'" :chartsData="Number(appInfo.quantity)" :dataTxt="'当前电量'" />
				<annularCharts :screenWidth="screenWidth" :chartsColor="'#2a5be6'" :chartsData="Number(appInfo.memory)" :dataTxt="'当前内存使用'" />
				<annularCharts :screenWidth="screenWidth" :chartsColor="'#ed6940'" :chartsData="Number(appInfo.storage)" :dataTxt="'当前存储使用'" />
			</view>
			<view class="sn_details_box">
				<!-- 设备型号跳转 -->
				<view class="sn_details box box-pack-between pad_big pad_bot_big pad_top_big" @click="gotoIpad">
					<view class="left">
						设备型号：<text>{{appInfo.device}}(Sn: {{appInfo.value}})</text>
					</view>
					<view class="right">
						设备详情 >
					</view>
				</view>

				<!-- 用于过度 -->
				<view class="gradual_box" v-if="false"></view>

			</view>

			<!-- 平板使用记录 -->
			<view class="use_record_charts pad_big" style="z-index: -1;" v-if="false">
				<view class="box box-pack-between box-align-center">
					<view class="pad_bot_big" style="font-size: 28rpx; font-weight: bold;">平板使用记录</view>
					<view class="" style="padding-right: 10rpx;">
						<uni-data-checkbox mode="tag" selectedColor="#a8a1ca" selectedTextColor="#a8a1ca" v-model="useRecordValue" :localdata="useRecordRange"></uni-data-checkbox>
					</view>
				</view>
				<useRecordCharts :useRecordValue="useRecordValue"></useRecordCharts>
			</view>

			<!-- 应用使用记录 -->
			<view class="app_use_record">
				<view class="app_use_record_header pad_top">
					<view class="" style="padding-right: 10rpx;">
						<uni-data-checkbox mode="tag" selectedColor="#a8a1ca" selectedTextColor="#a8a1ca" v-model="appUseRecordValue" :localdata="appUseRecordList" @change="getQueryAppUsetTimeLog"></uni-data-checkbox>
					</view>
				</view>
				<view class="app_use_record_item box box-pack-between pad_def pad_bot_big" v-for="(item,i) in appUseTimeList" :key="i">
					<view class="">
						<image :src="item.app_img" mode="widthFix" style="width: 80rpx;"></image>
					</view>
					<view class="app_time">
						<view class="box box-pack-between" style="padding-bottom: 15rpx;">
							<view class="">{{item.app_name}}</view>
							<view class="">{{item.use_time | computeMinute}}</view>
						</view>
						<view class="box box-pack-between box-align-center">
							<!-- 	<view class="times">
								09:21-10:30
							</view> -->
							<view class="" style="flex: 1;">
								<u-line-progress active-color="#5593fa" :height="18" :percent="70" :show-percent="false"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<view class="app_use_record_footer pad_bot">
					<text @click="getAllAppUseTimeLog">展开</text><u-icon v-if="isMoreApp" name="arrow-up"></u-icon><u-icon v-else name="arrow-down"></u-icon>
				</view>
			</view>

			<!-- 网页浏览记录 -->
			<view class="web_record mar_top_big" v-if="false">
				<view class="app_use_record_header">
					<view class="" style="padding-right: 10rpx;">
						<uni-data-checkbox selectedColor="#a2d0c1" selectedTextColor="#a2d0c1" mode="tag" v-model="webRecordValue" :localdata="appUseRecordList" @change="querySnBrowserRecord"></uni-data-checkbox>
					</view>
				</view>
				<view class="app_use_record_item box box-pack-between pad_def pad_bot_big" v-for="(item,i) in browserRecordList" :key="i">
					<view class="box box-align-center box-pack-between" style="width: 100%;">
						<view class="box box-align-center box-pack-between">
							<view class="tag">最新</view>
							<view>{{item}}</view>
						</view>
					</view>
				</view>
				<view class="app_use_record_footer pad_bot">
					<text @click="queryAllBrowserRecord">展开</text><u-icon v-if="isMoreBrowser" name="arrow-up"></u-icon><u-icon v-else name="arrow-down"></u-icon>
				</view>
			</view>

			<!-- 当前管控策略 -->
			<view class="control_list mar_top_big">
				<view class="control_header"></view>
				<view class="control_item box box-pack-between pad_def pad_bot_big" v-for="(item,i) in controlList" :key="i" @click="gotoUrl(item.url)">
					<view class="box box-align-center box-pack-between" style="width: 100%;">
						<view class="box box-align-center box-pack-between">
							<view class="" style="margin-right: 10rpx;">
								<image :src="item.img" mode="widthFix" style="width: 60rpx;"></image>
							</view>
							<view>{{item.tit}}</view>
						</view>
						<view class="icons">
							<u-icon name="arrow-right" color="#cccccc"></u-icon>
						</view>
					</view>
					<view class="control_line"></view>
				</view>
				<view class="app_use_record_footer pad_bot"></view>
			</view>
		</view>
		<view v-else class="" style="height: 100vh;">
			<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/default.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import annularCharts from './component/annularCharts.vue'
	import useRecordCharts from './component/useRecordCharts.vue'
	import { getTimestamp } from '../../utils/tools';
	import {
		querySnLogInfo,
		checkRefresh,
		queryAppLog,
		querySumAppLog,
		getAppInstall,
		querySysApp,
		querySnIdScreenshot,
		screenIsLock,
		getAppUseTimeLog,
		refreshEquipParam,
		getSnBrowserRecord
	} from '@/api/userHome.js'

	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
	import { mapGetters, mapMutations } from 'vuex';
	const zip = ([x, ...xs], [y, ...ys], [z, ...zs]) => {
		if (x === undefined || y === undefined || z === undefined) return []
		return [
			[x, y, z], ...zip(xs, ys, zs)
		]
	}
	export default {
		components: {
			annularCharts,
			useRecordCharts
		},
		data() {
			return {
				snID: 0,
				//设备信息
				appInfo: {
					name: '',
					avatar: '',
					addr: '',
					is_wifi: 0,
					quantity: '',
					minute: 0,
					memory: 0,
					install_count: 0,
					storage: '',
					wifi_ssid: '',
					value: '',
					is_online: 0,
					orm_version: '',
					device: '',
					app: {
						create_time: null,
						minute: '',
						app_name: '',
						app_img: ''
					}
				},
				defAvatar: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/uploads/miniDefault.png',
				//应用使用记录
				echartD: {},
				echartsShow: false,
				phoneHeight: '',
				screenWidth: 0, //设置图表大小
				useRecordValue: 1,
				useRecordRange: [{
						value: 1,
						text: "今天"
					},
					{
						value: -1,
						text: "昨天"
					},
					{
						value: 7,
						text: "7天"
					},
					{
						value: 30,
						text: "30天"
					},
				],
				appUseRecordValue: 1,
				appUseTimeList: [],
				browserRecordList: [],
				appUseRecordList: [{
						value: 1,
						text: "今天"
					},
					{
						value: -1,
						text: "昨天"
					},
					{
						value: 7,
						text: "7天"
					},
					{
						value: 30,
						text: "30天"
					},
				],
				webRecordValue: 1,
				controlList: [{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/i1.png',
						tit: '允许/禁止使用时段策略',
						url: '/pages/userHome/timeControl/index'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/i2.png',
						tit: 'APP应用管控策略',
						url: '/pages_subpackage/appControl/index'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/i3.png',
						tit: '上网浏览管控策略',
						url: '/pages_subpackage/websiteControl/newIndex'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/i4.png',
						tit: '影音娱乐管控策略',
						url: '/pages_subpackage/recreationControl/index'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/i5.png',
						tit: '亲情号码白名单管控策略',
						url: '/pages_subpackage/phoneControl/index'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/i6.png',
						tit: '远程设置护眼策略',
						url: '/pages_subpackage/eyeshieldControl/index'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/i7.png',
						tit: '安卓系统常用功能管控',
						url: '/pages_subpackage/androidControl/index'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/i8.png',
						tit: '安全定位/查找设备策略',
						url: '/pages_subpackage/snLocation/index'
					},
				],
				isMoreApp: true,
				isMoreBrowser: true,
			}
		},
		onLoad() {
			this.getPhoneHeight()
			this.queryAllBrowserRecord()
			this.getAllAppUseTimeLog()
		},
		onShow() {
			this.snID = this.snInfo.id
			this.getquerySnLogInfo(this.snID)
			let timestamp = getTimestamp()
			this.getServerData(timestamp)
		},

		computed: {
			...mapGetters(['isBind', 'snInfo', 'isOnline'])
		},
		methods: {
			gotoUrl(url) {
				if (!url) return
				uni.navigateTo({
					url: url
				})
			},
			getPhoneHeight() { //获取高度
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.screenWidth = res.screenWidth / 3.5
						that.phoneHeight = res.statusBarHeight
					},
				});
			},
			//展开更多
			getMore(type) {
				this.$refs.uToast.show({
					title: '暂未开发！'
				})
			},
			chartsChange(e) {},

			//获取每日在线和应用使用信息
			getquerySnLogInfo(id) {
				querySnLogInfo({
					id: id
				}).then(res => {
					Object.keys(this.appInfo).forEach(key => {
						this.appInfo[key] = res.data[key]
					})
				}).catch(err => {
					console.log('获取每日在线和应用使用信息', err)
				})
			},
			gotoIpad() {
				uni.navigateTo({
					url: '/pages_subpackage/userHome/ipadInfo/index?snId=' + this.snID + '&isOnline=' + this.isOnline
				})
			},
			//图表方法
			getServerData(time) {
				let Column = {
					categories: [],
					series: []
				}
				//颜色
				let color = ['#60adff', '#f78331', '#fd5872', '#b6b5b5', '#8473ff']
				getAppUseTimeLog({
					id: this.snID,
					type: this.appUseRecordValue,
					isMore: false
				}).then(res => {
					let echartData = this.dataSort(res.data)
					Column.categories = echartData.map(item => item.app_name)
					//数值
					let timeVal = echartData.map(item => item.use_time)
					//标题
					let time = echartData.map(item => this.formatSeconds(item.use_time))
					let arr1 = zip(timeVal, time, color).map(([value, time, color]) => ({
						value,
						time,
						color
					}))
					Column.series = [{
						name: '',
						"data": arr1
					}]
					this.echartD = Column
					this.echartsShow = false
				}).catch(err => {
					Column.categories = ['App', 'App', 'App', 'App', 'App']
					Column.series = [{
						name: '',
						"data": [{
							value: 2,
							color: '#60adff'
						}, {
							value: 5,
							color: '#f78331'
						}, {
							value: 0,
							color: '#fd5872'
						}, {
							value: 10,
							color: '#b6b5b5'
						}, {
							value: 0,
							color: '#8473ff'
						}]
					}]
					this.echartD = Column
					this.echartsShow = true
				})
			},
			getIndex(e) {
				let categories = uCharts.option[e.id].categories;
				let series = uCharts.option[e.id].series;
				let index = e.currentIndex.index;
				let textList = [];
				for (let i = 0; i < series.length; i++) {
					textList.push({
						text: categories[index] + ":" + series[i].data[index].time,
						color: series[i].color
					})
				}
				//changedTouches是点击的坐标值
				uCharts.instance[e.id].showToolTip({
					changedTouches: [e.event]
				}, {
					index: index,
					textList: textList
				});
			},
			formatSeconds(value) {
				var theTime = parseInt(value); // 需要转换的时间秒 
				var theTime1 = 0; // 分 
				var theTime2 = 0; // 小时 
				var theTime3 = 0; // 天
				if (theTime > 60) {
					theTime1 = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					if (theTime1 > 60) {
						theTime2 = parseInt(theTime1 / 60);
						theTime1 = parseInt(theTime1 % 60);
						if (theTime2 > 24) {
							//大于24小时
							theTime3 = parseInt(theTime2 / 24);
							theTime2 = parseInt(theTime2 % 24);
						}
					}
				}
				var result = '';
				if (theTime > 0) {
					result = "" + parseInt(theTime) + "秒";
				}
				if (theTime1 > 0) {
					result = "" + parseInt(theTime1) + "分" + result;
				}
				if (theTime2 > 0) {
					result = "" + parseInt(theTime2) + "小时" + result;
				}
				if (theTime3 > 0) {
					result = "" + parseInt(theTime3) + "天" + result;
				}
				return result;
			},
			dataSort(value) {
				let data = value.filter(item => item.use_time > 0).sort((a, b) => {
					return b.use_time - a.use_time
				})
				if (data.length > 5) {
					return data.splice(0, 5)
				} else {
					return data
				}
			},
			getQueryAppUsetTimeLog(e) {
				let type = e.detail.data.value
				getAppUseTimeLog({
					id: this.snInfo.id,
					type: type,
					isMore: false
				}).then(res => {
					this.appUseTimeList = res.data
				}).catch(err => {
					this.appUseTimeList = []
				})
			},
			getAllAppUseTimeLog() {
				this.isMoreApp = !this.isMoreApp
				getAppUseTimeLog({
					id: this.snInfo.id,
					type: this.appUseRecordValue,
					isMore: this.isMoreApp
				}).then(res => {
					this.appUseTimeList = res.data
				}).catch(err => {
					this.appUseTimeList = []
				})
			},
			querySnBrowserRecord(e) {
				let type = e.detail.data.value
				getSnBrowserRecord({
					id: this.snInfo.id,
					type: type,
					isMore: false
				}).then(res => {
					this.browserRecordList = res.data
				}).catch(err => {
					this.browserRecordList = []
				})
			},
			queryAllBrowserRecord() {
				this.isMoreBrowser = !this.isMoreBrowser
				getSnBrowserRecord({
					id: this.snInfo.id,
					type: this.webRecordValue,
					isMore: this.isMoreBrowser
				}).then(res => {
					this.browserRecordList = res.data
				}).catch(err => {
					this.browserRecordList = []
				})
			},
			toRefreshEquipParam() {
				refreshEquipParam({
					id: this.snInfo.id
				}).then(res => {
					console.log('刷新状态成功')
				}).catch(err => {
					console.log("刷新状态失败")
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f1f2f6;
	}
</style>

<style lang="less" scoped>
	.top_box {
		background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/beijing.png');
		// background-positio0%;
		background-repeat: no-repeat;
		background-size: 100%;
		color: #ffffff;
		padding-bottom: 60rpx;
	}

	.top {
		position: fixed;
		top: 0;

		.top_tit {
			position: absolute;
			bottom: 10px;
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.header_info {
		.user_info {
			display: flex;
			flex-direction: column;
			justify-conent: space-between;
			flex: 1;
			border-bottom: 1px solid #3a62c6;

			.username {
				font-size: 32rpx;
			}
		}

		.other_info {
			padding-left: 160rpx;
			font-size: 24rpx;
			padding-top: 20rpx;
			color: #babcc1;
		}
	}

	.sn_data_charts {
		background: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-top: -15rpx;
		padding: 40rpx;
	}

	.sn_details_box {
		background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/beijing2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.sn_details {
		border-top: 1px solid #fdfdfd;
		border-bottom: 1px solid #fdfdfd;
		font-size: 24rpx;

		.left {
			text {
				color: #a5a5a5;
			}
		}

		.right {
			color: #cccccc;
		}
	}

	.gradual_box {
		height: 60rpx;
	}

	//记录公共模块
	.app_use_record,
	.web_record,
	.control_list {
		margin: 40rpx;
		border-radius: 40rpx;
		overflow: hidden;
		box-shadow: 0px 0px 10px 3px #f2f2f2;

		.app_use_record_header {
			display: flex;
			justify-content: flex-end;
			background-repeat: no-repeat;
			padding-bottom: 60rpx;
		}

		.app_use_record_footer {
			background-color: #fff;
			font-size: 24rpx;
			color: #b8b8b8;
			text-align: right;
			padding-right: 20rpx;
		}
	}

	.app_use_record {
		.app_use_record_header {
			background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/beijing3.png');
			background-size: 100%;
		}

		.app_use_record_item {
			background-color: #fff;
			font-size: 24rpx;

			.app_time {
				flex: 1;
				padding-left: 15rpx;

				.times {
					font-size: 22rpx;
					color: #b2b2b2;
					padding-right: 20rpx;
				}
			}
		}
	}

	.web_record {
		.app_use_record_header {
			padding-top: 10rpx;
			background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/beijing4.png');
			background-size: 100% 100%;
		}

		.app_use_record_item {
			background-color: #fff;
			font-size: 24rpx;

			.tag {
				font-size: 22rpx;
				padding: 15rpx 9rpx;
				background-color: #ff7e67;
				color: #fff;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.times {
				font-size: 22rpx;
				color: #d6d6d6;
			}
		}
	}

	.control_list {
		.control_header {
			background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/beijing5.png');
			background-size: 100% 100%;
			height: 90px;
		}

		.control_item {
			position: relative;
			background-color: #fff;
			font-size: 26rpx;
		}

		.control_line {
			position: absolute;
			bottom: 20rpx;
			right: 40rpx;
			width: 80%;
			height: 1px;
			background-color: #f7f7f7;
		}
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 100%;
		height: 380upx;
		background-color: #ffffff;
		z-index: 999;
	}

	.charts {
		width: 700upx;
		height: 350upx;
		background-color: #ffffff;
		z-index: 999;
	}

	.img_go {
		transform: rotate(-360deg);
		transition: all 2s;
	}

	.img_stop {
		transition: all 2s;
	}

	image {
		height: 100%;
		width: 100%;
	}

	.city {
		margin: 20rpx 0;

		.text {
			margin-left: 10rpx;
		}
	}

	.wifi {
		width: 100%;
		font-size: 20rpx;
	}

	.info_top {
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 20rpx 20rpx 20rpx 0;
		margin-top: 20rpx;
		color: #ffffff;
		position: relative;

		.refresh {
			position: absolute;
			right: 10px;
			top: 5px;
		}

		.user_state {
			.state_right {
				.title {
					font-size: 32rpx;
					padding-bottom: 10rpx;
					font-weight: 600;
					margin-top: 20rpx;
				}


			}

			.app_info {
				line-height: 50rpx;

				.app_time {
					font-size: 20rpx;
				}
			}
		}
	}

	.title_detail {
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.timeCharts {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 600;
		background-color: #FFFFFF;

		.title {
			padding: 20rpx 20rpx 0 20rpx;
		}
	}

	.textHiddens::before {
		content: " ";
		height: 22rpx;
		width: 22rpx;
		display: inline-block;
		border-radius: 50%;
		line-height: 26rpx;
		margin: 0 10rpx;
	}

	.green::before {
		background-color: #83de32;
	}

	.lines::before {
		background-color: #d2d6de;
	}

	.user_app {
		margin-top: 20rpx;

		.line_app {
			padding: 20rpx 10rpx;
			margin-right: 20rpx;
			width: 62%;
			background-color: #FFFFFF;

			.apo_img {
				height: 80rpx;
				width: 80rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.app_txt {
				font-size: 18rpx;
				width: 80%;

				.title {
					font-size: 24rpx;
				}
			}
		}

		.app_number {
			flex: 1;

			.viewer {
				background-color: #FFFFFF;
				padding: 20rpx 40rpx;
				width: 100%;
			}

			.number {
				font-size: 40rpx;
				font-weight: 500;
				background-image: linear-gradient(135deg, #2e89ff 50%, #6f36f7 30%);
				-webkit-background-clip: text;
				color: transparent;
			}

			.install {
				font-size: 18rpx;
				white-space: nowrap;
			}

			.lock {
				margin-top: 10rpx;
			}
		}
	}

	.ipar {
		margin-top: 20rpx;

		.ipar_center {
			width: 48.5%;
			background-color: #FFFFFF;
			padding: 20rpx;

			.title {
				font-size: 24rpx;
				font-weight: 600;
				letter-spacing: 2px;

				.title_icon {
					background-color: #d0eced;
					border-radius: 50%;
					color: #00949a;
					padding: 10rpx;
				}

				.title_icons {
					background-color: #e6e6e6;
					border-radius: 50%;
					color: #898989;
					padding: 10rpx;
				}
			}

			.u-progress-content {
				font-size: 24rpx;
			}

			.storage {
				padding: 10rpx 0 0 0;

				.storage_img {
					margin-left: 40rpx;
					font-size: 24rpx;
					font-weight: 600;
				}

				image {
					height: 80rpx;
					width: 120rpx;
					margin-right: 20rpx;
				}

				.storage_txt {
					font-size: 18rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.control_btn {
		margin-top: 20rpx;
		text-align: center;
		font-size: 28rpx;
		padding: 22rpx 0;
		background-color: #FFFFFF;
		letter-spacing: 2px;
		width: 48.5%;

		.control_img {
			margin-right: 20rpx;
			background-image: linear-gradient(135deg, #2e89ff 50%, #6f36f7 40%);
			-webkit-background-clip: text;
			color: transparent;
			font-size: 45rpx;
		}
	}

	.time_control {
		justify-content: flex-end;
		height: 100%;
		align-items: flex-end;

		.time_txt {
			background-color: #0480ff;
			border-radius: 40rpx;
			padding: 20rpx 40rpx;
			margin-bottom: 40rpx;
			color: #FFFFFF;
			font-size: 20rpx;
			letter-spacing: 2px;
			font-weight: 400;
		}
	}

	.charts_box {
		position: relative;

		.charts_txt {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 16px;
		}
	}

	.font-wSix {
		font-size: 24rpx;
	}
</style>